<!--  -->
<template>
  <div class="ims-main">
    <el-card class="card" :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header">
        <span>查询图片</span>
      </div>
      <el-row style="margin:20px" :gutter="20">
        <el-col :span="6">
          <el-input v-model="search.title" placeholder="根据标题查询" label></el-input>
        </el-col>
        <el-col :span="6" :offset="12">
          <el-button size="small" type="primary" @click="toSearch">查询</el-button>
          <el-button size="small" @click="toRemoveSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card card2" :body-style="{ padding: '0px' }" v-loading="loading" shadow="never">
      <div slot="header">
        <el-upload
          :action="host+'/admin/xy/upload/uploadImg'"
          :show-file-list="true"
          :on-success="uploadImgSuccess"
          :headers="token"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1MB</div>
        </el-upload>
      </div>
      <div>
        <div class="pagin">
          <el-pagination
            style="float:right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.start"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.pages"
          ></el-pagination>
        </div>
        <div class="imglist">
          <el-card
            class="img-item"
            shadow="hover"
            v-for="(item,index) in imgList"
            :key="index"
            :body-style="{ padding: '20px' }"
          >
            <div class="img-div" @click="todetail(host+'/'+item.dir+'/'+item.fileName)">
              <img :src="host+'/'+item.dir+'/'+item.fileName" alt />
            </div>

            <div class="item-bot">
              <p class="img-title" @click="toIptShow(item.id)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="点击更换标题"
                  :open-delay="1000"
                  placement="top-start"
                >
                  <span :id="`span${item.id}`">{{item.title}}</span>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="按enter保存" placement="top-start">
                  <input
                    type="text"
                    style="display:none"
                    :id="`ipt${item.id}`"
                    v-model="item.title"
                    @blur="iptBlur(item.id)"
                    @keydown.enter="titleUpload(item.id,item.title)"
                    placeholder="更改名称标题"
                  />
                </el-tooltip>
              </p>
              <p class="img-size">{{item.size}}b</p>
              <el-button type="danger" size="small" @click="removeImg(item.id)">删除</el-button>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
    <Detail ref="detail"></Detail>
  </div>
</template>

<script>
const _ = require("lodash");
import { getToken } from "@/utils/myAuth";
import { addImgList, addTitle, removeImgList } from "@/api/material/img";
import Detail from "@/views/material/imgs/ImgDetail";
const hosts = require("@/settings.js");
export default {
  name: "Img",
  components: {
    Detail,
  },
  data() {
    return {
      host: hosts.host,
      page: {
        start: 1,
        limit: 12,
        sizes: [12, 24, 48],
      },
      id: "",
      iptshow: false,
      loading: false,
      search: {},
      search2: {},
      imgList: [],
    };
  },
  computed: {
    token() {
      var obj = {
        "bufan-token": getToken(),
      };
      return obj;
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    titleUpload(id, title) {
      var ipt = document.querySelector(`#ipt${id}`);
      var spans = document.querySelector(`#span${id}`);
      if (title == "未命名") {
        title = null;
      }
      var obj = {
        id,
        title,
      };
      addTitle(obj).then((res) => {
        if (res.code == "success") {
          ipt.style.display = "none";
          spans.style.display = "block";
          this.init();
        }
      });
    },
    iptBlur(id) {
      var ipt = document.querySelector(`#ipt${id}`);
      var spans = document.querySelector(`#span${id}`);
      ipt.style.display = "none";
      spans.style.display = "block";
    },
    todetail(e) {
      this.$refs.detail.initImg(e);
    },
    toIptShow(id) {
      var ipt = document.querySelector(`#ipt${id}`);
      var spans = document.querySelector(`#span${id}`);

      ipt.style.display = "block";
      ipt.focus();
      spans.style.display = "none";
    },
    removeImg(id) {
      var that = this;
      this.$confirm("此操作将永久删除该图像, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeImgList({ id }).then((res) => {
            console.log(res);
            if (res.code == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              that.init();
            }
          });
        })
        .catch(() => {});
    },
    handleSizeChange(v) {
      this.page.limit = v;
      this.init();
    },
    handleCurrentChange(v) {
      this.page.start = v;
      this.init();
    },
    uploadImgSuccess(response, file) {
      this.init();
    },
    toRemoveSearch() {
      this.search = {};
      this.search2 = {};
      this.init();
    },
    init() {
      var obj = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search2,
      };
      this.loading = true;
      addImgList(obj).then((res) => {
        console.log(res);
        this.imgList = res.data.list;
        this.imgList.forEach((element) => {
          if (!element.title) {
            element.title = "未命名";
          }
        });
        this.page.pages = res.data.totalRow;
        this.loading = false;
      });
    },
    toSearch() {
      this.search2 = _.pickBy(this.search, (item) => item);
      this.page.start = 1;
      this.init();
    },
  },
};
</script>

<style  lang='scss' scoped >
.ims-main {
  padding: 20px;
  .card {
    border: 0;
  }
  .card2 {
    margin-top: 50px;
  }
  .pagin {
    margin: 20px 0;
    overflow: hidden;
  }
  .imglist {
    overflow: hidden;
    .img-item {
      float: left;
      height: 350px;
      width: 280px;
      margin: 0 10px;
      margin-bottom: 20px;
      .img-div {
        position: relative;
        // width: 90%;
        height: 270px;
        overflow: hidden;
        margin: 0 auto;
        img {
          position: absolute;
          object-fit: contain;
          display: block;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: auto;
        }
      }
      .item-bot {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .img-title {
          position: relative;
          color: #999;
          height: 32px;
          font-size: 14px;
          line-height: 32px;
          width: 100px;
          input {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 5px;
            border: 1px solid rgb(49, 129, 153);
            color: #999;
            outline: none;
            height: 30px;
            width: 100px;
          }
        }
        .img-size {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
